<template>
  <nav class="fixed-bottom" :class="style.navbar">
    <button
      class="btn btn-danger"
      :class="{'navbar-text':isFinished}"
      @click="$store.commit('prev')"
    >上一题</button>
    <span class="navbar-text" v-show="!isFinished">{{info_finished}}</span>
    <button class="btn btn-danger btn-submit" v-show="isFinished" @click="submit">提交</button>
    <button
      class="btn btn-danger"
      :class="{'navbar-text':isFinished}"
      @click="$store.commit('next')"
    >下一题</button>
  </nav>
</template>

<script>
export default {
  name: "Footer",
  computed: {
    style() {
      return this.$store.state.style;
    },
    isFinished() {
      if (!this.$store.state.recorder || !this.$store.state.content) {
        return false;
      }
      return (
        this.$store.state.recorder.length == this.$store.state.content.length
      );
    },
    info_finished() {
      let count = 0;
      let all = 0;
      if (this.$store.state.content) {
        all = this.$store.state.content.length;
        count = this.$store.state.recorder.length;
      }
      return "已完成: " + count + "/" + all;
    },
    inTime() {
      if (this.$store.state.isTimeLimited) {
        return this.$store.state.timeLimit - this.$store.state.timeUsed >= 0;
      }
      return true;
    }
  },
  methods: {
    submit() {
      //
      this.$store.dispatch("submit");
    }
  },
  watch: {
    inTime() {
      if (!this.inTime) {
        this.submit();
      }
    }
  }
};
</script>

<style scoped>
.btn-submit {
  font-size: 1.25em;
  font-weight: bold;
}
</style>
